<template>
  <a-form-item :name="props.formNamePath" :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
    :style="{ marginLeft: formItem.marginLeft + 'px' }" :class="formItem.associated
      ? 'form-a-radio-group_associated'
      : 'form-a-number-input'
      ">
    <span class="beforeText upload-pic" v-if="formItem.beforeText">{{
      formItem.beforeText
    }}</span>
    <div class="ant-upload-list ant-upload-list-picture-card" @click="isVisible = true" v-if="formItem.value.length <= 0">
      <div class="ant-upload ant-upload-select ant-upload-select-picture-card">
        <span tabindex="0" class="ant-upload" role="button">
          <input id="form_item_1_value" type="file" style="display: none;"><!--v-if-->
          <div data-v-671c8e58=""><plus-outlined data-v-671c8e58=""></plus-outlined><span data-v-671c8e58=""
              class="iconfont icon-Add"></span>
            <div data-v-671c8e58="" class="ant-upload-text">上传视频</div><!--v-if-->
          </div>
        </span>
      </div>
    </div>
    <!-- 上传会回显列表，其实把上传组件的点击上传隐藏掉了 -->
    <videoUpload :fileList="formItem.value" :multiple="formItem.multiple" @uploadFinished="uploadFinished"
      @upload_remove_Finished="upload_remove_Finished" :maxCount="formItem.maxCount" :accept="formItem.accept"
      :title="formItem.uploadTitle" :isAutoUpload="true" :showCard="false">
    </videoUpload>
    <div class="help-msg" v-if="formItem.helpMsg">
      {{ formItem.helpMsg }}
    </div>
  </a-form-item>
  <uploadDialong :fileList="formItem.value" @uploadFinished="handleConfirm" @handleCancle="isVisible = false"
    :isVisible="isVisible" uploadType="insertvideo">
  </uploadDialong>
</template>

<script lang="ts" setup>
import videoUpload from "@/components/uploadDialog/videoUpload.vue";
import uploadDialong from "@/components/uploadDialog/uploadDialong.vue";
import { ref, reactive, watch, computed } from "vue"
import { dataSourceType } from "@/type.d";
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';
//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType,
  },
  formNamePath: [],
});
// emit
const emit = defineEmits(["uploadFinished", 'removeFinished']);
//data
const formItem = ref(props.formItem as any);
//模态框
const isVisible = ref(false);
useColumnItem(computed(() => props.formItem), formItem)

// 上传视频
const uploadFinished = (data: any, id: any) => {
  emit("uploadFinished", data, id);
};
// 删除视频
const upload_remove_Finished = (data: any) => {
  emit("removeFinished", data,);
};
// 模态框上传视频
const handleConfirm = (html: any, res: any) => {
  formItem.value.value = res;
  isVisible.value = false;
}

</script>

<style lang="less" scoped>
.help-msg {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}
</style>
 